<template>
  <div class="guangzhou">
    <van-nav-bar
      :title="cityname"
      right-text="切换城市"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-form>
      <van-field
        v-model="keyword"
        @input="site"
        name="用户名"
        placeholder="输入学校.商务楼.地址"
      />
      <van-button @click="btn2" type="info" block>提交</van-button>
    </van-form>
    <div class="hei"></div>
    <div class="history">
      <h5 class="lishi">搜索历史</h5>
      <ul class="content">
        <li
          v-for="item in dizhi"
          :key="item.id"
          @click="btn3(item.address, item.name, item.latitude, item.longitude)"
        >
          <div class="lis">
            <h3 class="dizhi1">{{ item.name }}</h3>
            <p class="xiangxidizhi">{{ item.address }}</p>
            <br />
          </div>
        </li>

        <van-button @click="one" class="one" type="default"
          >清空所有</van-button
        >
      </ul>
    </div>
  </div>
</template>

<script>
import { citiesid, pois } from "../api/citylist";
export default {
  data() {
    return {
      username: "",
      cityname: "",
      dizhi: "",
      id: this.$route.query.id,
      keyword: "",
      array: JSON.parse(localStorage.getItem("dizhi"))
        ? JSON.parse(localStorage.getItem("dizhi"))
        : [],
    };
  },
  watch: {
    deep: true,
    immediate: true,
    keyword: {
      handler(val, oldval) {
        console.log(59, val, 60, oldval);
        if (val == "") {
          console.log(83, this.array);
          console.log(1);
          this.dizhi = JSON.parse(localStorage.getItem("dizhi"));
        }
      },
    },
  },
  created() {
    console.log(this.id);
    console.log(47, this.id);
    citiesid(this.id).then((res) => {
      console.log(45, res);
      this.cityname = res.data.name;
      console.log(48, this.cityname);
    });

    this.dizhi = JSON.parse(localStorage.getItem("dizhi"));
  },
  methods: {
    one() {
      this.dizhi = [];
      this.array = [];
      localStorage.removeItem("dizhi");
    },
    btn3(add, name, num1, num2) {
      console.log(num1, num2);

      console.log(add, name);
      if (this.array.indexOf(name) == -1) {
        this.array.push({
          address: add,
          name: name,
          latitude: num1,
          longitude: num2,
        });
      }

      console.log(70);
      let a = JSON.stringify(this.array);
      localStorage.setItem("dizhi", a);
      this.$router.push({
        path: "/index",
        query: {
          name: name,
          latitude: num1,
          longitude: num2,
          val: "外卖",
        },
      });
    },
    btn2() {
      this.dizhi = JSON.parse(localStorage.getItem("dizhi"));
    },
    btn9() {
      pois(this.id, this.keyword).then((res) => {
        console.log(60, res);
        this.dizhi = res.data;
      });
    },
    onClickLeft() {
      this.$router.push("/cityList");
    },
    site() {
      if (this.keyword == "") {
      } else {
        this.btn9();
      }
    },
  },
};
</script>


<style lang="less" scoped>
.header .van-icon {
  margin-left: 25px;
  font-size: 31px;
}
.lis {
  padding: 13px 20px;
  border-bottom: 1px solid #e4e4e4;
  .dizhi1 {
    font-size: 25px;
  }
  .xiangxidizhi {
    margin-top: 20px;
    font-size: 15px;
    color: #999999;
  }
}
.hei {
  height: 20px;
  background-color: #fff;
}
.lishi {
  line-height: 30px;
  height: 30px;
}
/deep/.van-nav-bar {
  background-color: #3190e8;

  .van-nav-bar__title {
    color: #fff;
  }

  .van-icon-arrow-left {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}

.guangzhou {
  background-color: #f5f5f5;
}
.content {
  background-color: #fff;

  h3 {
    margin-bottom: 10px;
  }
}
h5 {
  background-color: #f5f5f5;
}
.van-form {
  background-color: #fff;
}
.one {
  border: none;
  width: 100%;
  color: #666666;
  font-size: 25px;
  margin-top: 20px;
}

/deep/.van-field {
  width: 80%;
  height: 30px;
  margin: 20px 40px 20px;
}
.van-button {
  width: 80%;
  height: 30px;
  margin-left: 40px;
}
</style>